<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">

    

    <title>
      WordPress主题制作心得 | XTCEL 
    </title>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    
      <meta name="author" content="Jack Yong">
    
    

    <meta name="description" content="与WordPress的缘，来自于几年前看到各种大神都有个人博客，自己也想弄一个，纯粹是出于羡慕与好奇。当时不会html、css也不会PHP，在网上搜索了一下，大家都推荐使用WordPress个人博客系统，我跟着网上的教程配置了WordPress，将博客挂到自己的服务器。当时也没有什么东西好分享的，博客一直空空如也，而且发现每次打开博客都很慢，为了使得博客看起来更好看一点安装一些主题。最后因为没有">
<meta name="keywords" content="WordPress,博客">
<meta property="og:type" content="article">
<meta property="og:title" content="WordPress主题制作心得 | XTCEL">
<meta property="og:url" content="http://xtcel.com/2016/06/09/WordPress主题制作心得/index.html">
<meta property="og:site_name" content="XTCEL">
<meta property="og:description" content="与WordPress的缘，来自于几年前看到各种大神都有个人博客，自己也想弄一个，纯粹是出于羡慕与好奇。当时不会html、css也不会PHP，在网上搜索了一下，大家都推荐使用WordPress个人博客系统，我跟着网上的教程配置了WordPress，将博客挂到自己的服务器。当时也没有什么东西好分享的，博客一直空空如也，而且发现每次打开博客都很慢，为了使得博客看起来更好看一点安装一些主题。最后因为没有">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="http://o88f31ee3.bkt.clouddn.com/blog/image/jpg/wordpress.jpg">
<meta property="og:image" content="http://o88f31ee3.bkt.clouddn.com/blog/image/jpg/myblog.jpg">
<meta property="og:updated_time" content="2018-01-11T08:53:23.423Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="WordPress主题制作心得 | XTCEL">
<meta name="twitter:description" content="与WordPress的缘，来自于几年前看到各种大神都有个人博客，自己也想弄一个，纯粹是出于羡慕与好奇。当时不会html、css也不会PHP，在网上搜索了一下，大家都推荐使用WordPress个人博客系统，我跟着网上的教程配置了WordPress，将博客挂到自己的服务器。当时也没有什么东西好分享的，博客一直空空如也，而且发现每次打开博客都很慢，为了使得博客看起来更好看一点安装一些主题。最后因为没有">
<meta name="twitter:image" content="http://o88f31ee3.bkt.clouddn.com/blog/image/jpg/wordpress.jpg">
    
    
    
      <link rel="icon" type="image/x-icon" href="/images/avatar.png">
    
    <link rel="stylesheet" href="/css/uno.css">
    <link rel="stylesheet" href="/css/highlight.css">
    <link rel="stylesheet" href="/css/archive.css">
    <link rel="stylesheet" href="/css/china-social-icon.css">

</head>
<body>

    <span class="mobile btn-mobile-menu">
        <i class="icon icon-list btn-mobile-menu__icon"></i>
        <i class="icon icon-x-circle btn-mobile-close__icon hidden"></i>
    </span>

    

<header class="panel-cover panel-cover--collapsed">


  <div class="panel-main">

  
    <div class="panel-main__inner panel-inverted">
    <div class="panel-main__content">

        
        <a href="/" title="link to homepage for XTCEL"><img src="/images/avatar.png" width="80" alt="XTCEL logo" class="panel-cover__logo logo" /></a>
        

        <h1 class="panel-cover__title panel-title"><a href="/" title="link to homepage">XTCEL</a></h1>
        <hr class="panel-cover__divider" />

        
        <p class="panel-cover__description">
          关注技术   热爱设计
        </p>
        <hr class="panel-cover__divider panel-cover__divider--secondary" />
        

        <div class="navigation-wrapper">

          <nav class="cover-navigation cover-navigation--primary">
            <ul class="navigation">

              
                
                <li class="navigation__item"><a href="/#blog" title="" class="blog-button">首页</a></li>
              
                
                <li class="navigation__item"><a href="/about" title="" class="">关于</a></li>
              
                
                <li class="navigation__item"><a href="/archive" title="" class="">归档</a></li>
              

            </ul>
          </nav>

          <!-- ----------------------------
To add a new social icon simply duplicate one of the list items from below
and change the class in the <i> tag to match the desired social network
and then add your link to the <a>. Here is a full list of social network
classes that you can use:

    icon-social-500px
    icon-social-behance
    icon-social-delicious
    icon-social-designer-news
    icon-social-deviant-art
    icon-social-digg
    icon-social-dribbble
    icon-social-facebook
    icon-social-flickr
    icon-social-forrst
    icon-social-foursquare
    icon-social-github
    icon-social-google-plus
    icon-social-hi5
    icon-social-instagram
    icon-social-lastfm
    icon-social-linkedin
    icon-social-medium
    icon-social-myspace
    icon-social-path
    icon-social-pinterest
    icon-social-rdio
    icon-social-reddit
    icon-social-skype
    icon-social-spotify
    icon-social-stack-overflow
    icon-social-steam
    icon-social-stumbleupon
    icon-social-treehouse
    icon-social-tumblr
    icon-social-twitter
    icon-social-vimeo
    icon-social-xbox
    icon-social-yelp
    icon-social-youtube
    icon-social-zerply
    icon-mail

-------------------------------->

<!-- add social info here -->



<nav class="cover-navigation navigation--social">
  <ul class="navigation">

    
      <!-- Github -->
      <li class="navigation__item">
        <a href="https://github.com/xtcel" title="Huno on GitHub">
          <i class='icon icon-social-github'></i>
          <span class="label">GitHub</span>
        </a>
      </li>
    

    <!-- China social icon -->
    <!--
    
      <li class="navigation__item">
        <a href="" title="">
          <i class='icon cs-icon-douban'></i>
          <span class="label">Douban</span>
        </a>
      </li>

      <li class="navigation__item">
        <a href="" title="">
          <i class='icon cs-icon-weibo'></i>
          <span class="label">Weibo</span>
        </a>
      </li>

    -->



  </ul>
</nav>



        </div>

      </div>

    </div>

    <div class="panel-cover--overlay"></div>
  </div>
</header>

    <div class="content-wrapper">
        <div class="content-wrapper__inner entry">
            

<article class="post-container post-container--single">

  <header class="post-header">
    
    <h1 class="post-title">WordPress主题制作心得</h1>

    

    <div class="post-meta">
      <time datetime="2016-06-09" class="post-meta__date date">2016-06-09</time> 

      <span class="post-meta__tags tags">

          

          
             &#8226; 标签:
            <font class="tags">
              <a class="tags-link" href="/tags/WordPress/">WordPress</a>, <a class="tags-link" href="/tags/博客/">博客</a>
            </font>
          

      </span>
    </div>
    
    

  </header>

  <section id="post-content" class="article-content post">
    <blockquote>
<p>与WordPress的缘，来自于几年前看到各种大神都有个人博客，自己也想弄一个，纯粹是出于羡慕与好奇。当时不会html、css也不会PHP，在网上搜索了一下，大家都推荐使用WordPress个人博客系统，我跟着网上的教程配置了WordPress，将博客挂到自己的服务器。当时也没有什么东西好分享的，博客一直空空如也，而且发现每次打开博客都很慢，为了使得博客看起来更好看一点安装一些主题。最后因为没有持续的写博客和AWS免费试用到期而不了了之。<br><a id="more"></a></p>
</blockquote>
<p><img src="http://o88f31ee3.bkt.clouddn.com/blog/image/jpg/wordpress.jpg" alt=""></p>
<h3 id="起缘"><a href="#起缘" class="headerlink" title="起缘"></a>起缘</h3><p>与WordPress的缘，来自于几年前看到各种大神都有个人博客，自己也想弄一个，纯粹是出于羡慕与好奇。当时不会html、css也不会PHP，在网上搜索了一下，大家都推荐使用WordPress个人博客系统，我跟着网上的教程配置了WordPress，将博客挂到自己的服务器。当时也没有什么东西好分享的，博客一直空空如也，而且发现每次打开博客都很慢，为了使得博客看起来更好看一点安装一些主题。最后因为没有持续的写博客和AWS免费试用到期而不了了之。</p>
<p> 我专科读的专业是通信技术，后来学了C语言后，发现自己对编程挺有天赋的，也喜欢折腾这些东西。毅然决定升本软件工程，经过几个月的每天图书馆生活终于如愿考上了福师大的软件工程专业，开始了码农之路。在大学里，系统的学习软件工程后。开始又重新萌发了要开发自己的博客的想法。不过这次不是想用WordPress，而是希望自己写一个博客系统。我个人喜欢比较简洁的设计，朋友推荐HTML5UP的模板，里面的模板大都设计非常简洁，很符合我的口味。我于是拿着HTML5Up的模板开始改成一个博客系统。经过半个月的开发，已经可以基本实现发布文章。然而想一想好像自己是在重复造轮子，WordPress已经很成熟了，还不如直接用WordPress自己设计主题就好了。</p>
<h3 id="WordPress主题制作"><a href="#WordPress主题制作" class="headerlink" title="WordPress主题制作"></a>WordPress主题制作</h3><p>WordPress(简称wp)的主题和插件是非常丰富的，有很多专门推荐wp主题的网站，也有很多主题开发教程。如果只是单纯的使用来讲很多wp主题都非常好，但是大部分主题总是有美中不足之处，有些感觉不够简洁太多软七八糟的模块和内容，有得设计不是很好看。所以还是自己动手丰衣足食比较好。</p>
<p>首先，如果你要制作一款主题，你肯定要先构思好你的主体框架，最好是可以用sketch之类的软件把框图画好，然后按照自己的设计码代码实现。</p>
<p>这是我的设计图:</p>
<p><img src="http://o88f31ee3.bkt.clouddn.com/blog/image/jpg/myblog.jpg" alt=""></p>
<p>左侧是导航栏，右侧是文章列表和文章内容详情显示，整个设计非常简洁。<br>具体的实现也很简单，主要代码都在index.php、hender.php、article.php、style.css里面。<br>如果需要本主题的可以到我的github上下载。</p>
<h3 id="遇到的坑"><a href="#遇到的坑" class="headerlink" title="遇到的坑"></a>遇到的坑</h3><p>在开发过程中遇到一些坑，和大家分享一下。</p>
<p>我主要是在导航栏这块遇到比较多的问题，起初导航栏是固定的，就是不可修改的那种。后来想一想为了扩展性，最好还是不要固定，要可以直接在wp后台可以设置比较好。导航栏条目由首页+分类类目+页面组成。首页是默认显示页，会显示所有文章列表。接下来每点击一个分类显示相应分类的文章列表，点击页面的栏目显示相应页面。</p>
<p>开始我觉得应该分别获取分类类目列表和页面列表然后添加到nav中，于是使用了wp_list_categorys()函数获取分类列表，然而发现这个方法的排序不好控制，最后只好放弃。后来发现wp里面有个叫菜单的东西，菜单里面的每个条目可以自由定义，可以是分类，也可以是页面。最关键是还可以自由拖动排序。这简直太好了，刚好符合我的所有需求。生成菜单只需要调用wp_nav_menu()，但是这个函数直接生成div或者nav(这个可以通过参数设置)，里面嵌套ul。每行是在wp后台设置的条目。然而，’首页’这个行并不能直接放到ul里面，这就不好玩了。查看了很多教程，都没有讲这个的处理。有一个比较好的方法是通过wp_nav_menu()设置Walker参数，自定义一个Walker_Nav_Menu,但是看了一下教程，貌似有点复杂，看了一下放弃。既然不能在生成的时候插入，那我等页面加载的时候再插入一个首页的li也是可以。于是就按照自己的思路做了。最后成功插入li,但是还有一些小bug.后期有时间再修复。</p>

  </section>

  

<section class="post-comments">
  <div id="disqus_thread"></div>
  <script type="text/javascript">
      var disqus_shortname = 'xtcel'; 
      /* * * DON'T EDIT BELOW THIS LINE * * */
      (function() {
          var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
          dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
          (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
      })();
  </script>
  <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</section>


  
</article>


            <footer class="footer">

    <span class="footer__copyright">&copy; 2014-2015. | 由<a href="https://hexo.io/">Hexo</a>强力驱动 | 主题<a href="https://github.com/someus/huno">Huno</a></span>
    
</footer>
        </div>
    </div>

    <!-- js files -->
    <script src="/js/jquery.min.js"></script>
    <script src="/js/main.js"></script>
    <script src="/js/scale.fix.js"></script>
    

    

    <script type="text/javascript" src="//cdn.bootcss.com/mathjax/2.3/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            MathJax.Hub.Config({
                tex2jax: {inlineMath: [['[latex]','[/latex]'], ['\\(','\\)']]}
            });
        });
    </script>



    

    <script src="/js/awesome-toc.min.js"></script>
    <script>
        $(document).ready(function(){
            $.awesome_toc({
                overlay: true,
                contentId: "post-content",
            });
        });
    </script>


    
    
    <!--kill ie6 -->
<!--[if IE 6]>
  <script src="//letskillie6.googlecode.com/svn/trunk/2/zh_CN.js"></script>
<![endif]-->

</body>
</html>
